<template>
  <div class="chart-container" style="height: 280px; width: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const container = this.$el;
    const myChart = echarts.init(container);

    const option = {
      backgroundColor: '#0f2035',
      title: {
        text: '大厅取号情况分析',
        left: '10px',
        top: '5px',
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: 'bold'
        },
        itemGap: 5,
        subtext: '单位：人',
        subtextStyle: {
          color: '#ccc',
          fontSize: 12
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '10%',
        top: '25%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
        axisLine: {
          lineStyle: {
            color: '#6699cc'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#ccc',
          fontSize: 10
        }
      },
      yAxis: {
        type: 'value',
        max: 250,
        axisLine: {
          lineStyle: {
            color: '#6699cc'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#ccc',
          fontSize: 10
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(102, 153, 204, 0.3)'
          }
        }
      },
      legend: {
        top: '30px',
        right: '10px',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: '#ccc',
          fontSize: 10
        },
        data: ['预计取号量', '当前取号量']
      },
      series: [
        {
          name: '预计取号量',
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#00ccff'
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#00ccff' },
                { offset: 1, color: '#0099cc' }
              ]
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(0, 204, 255, 0.3)' },
                { offset: 1, color: 'rgba(0, 153, 204, 0.1)' }
              ]
            }
          },
          data: [50, 100, 200, 150, 80, 120, 150, 220, 180, 150, 100]
        },
        {
          name: '当前取号量',
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#0099cc'
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#0099cc' },
                { offset: 1, color: '#006699' }
              ]
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(0, 153, 204, 0.2)' },
                { offset: 1, color: 'rgba(0, 102, 153, 0.1)' }
              ]
            }
          },
          data: [80, 150, 120, 200, 150, 100, 180, 200, 160, 120, 50]
        }
      ]
    };

    myChart.setOption(option);

    // 窗口 resize 时自适应
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
}
</script>

<style scoped>
.chart-container {
  position: relative;
  overflow: hidden;
}
</style>